<template><div><h2 id="模态窗-modal" tabindex="-1"><a class="header-anchor" href="#模态窗-modal"><span>模态窗 (Modal)</span></a></h2>
<p>Dcat Admin 中文文档 /</p>
<h2 id="模态窗-modal-1" tabindex="-1"><a class="header-anchor" href="#模态窗-modal-1"><span>模态窗 (Modal)</span></a></h2>
<blockquote>
<p>Since <code v-pre>v1.7.0</code></p>
</blockquote>
<p>基本使用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Modal</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$modal</span> <span class="token operator">=</span> <span class="token class-name static-context">Modal</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">lg</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">button</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'&lt;button class="btn btn-primary">点击打开弹窗&lt;/button>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'modal'</span> <span class="token operator">=></span> <span class="token variable">$modal</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    </span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="功能" tabindex="-1"><a class="header-anchor" href="#功能"><span>功能</span></a></h2>
<h3 id="标题-title" tabindex="-1"><a class="header-anchor" href="#标题-title"><span>标题 (title)</span></a></h3>
<p>设置弹窗标题</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="内容-body" tabindex="-1"><a class="header-anchor" href="#内容-body"><span>内容 (body)</span></a></h3>
<p>设置弹窗内容，此方法接受一个参数，允许传入<code v-pre>string</code>、<code v-pre>Cloure</code>、<code v-pre>Illuminate\Contracts\Support\Renderable</code>以及<code v-pre>Dcat\Admin\Contracts\LazyRenderable</code>类型值</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 传入字符串</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'字符串'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传入闭包，注意闭包必须返回字符串类型值或空值</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传入 Renderable</span></span>
<span class="line"><span class="token keyword">use</span> Dcat\Admin\Widgets\</span>
<span class="line"></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token class-name static-context">Card</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传入 LazyRenderable</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token class-name static-context">PostTable</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="底部内容-footer" tabindex="-1"><a class="header-anchor" href="#底部内容-footer"><span>底部内容 (footer)</span></a></h3>
<p>设置弹窗底部内容，此方法接受一个参数，允许传入<code v-pre>string</code>、<code v-pre>Cloure</code>、<code v-pre>Illuminate\Contracts\Support\Renderable</code>以及<code v-pre>Dcat\Admin\Contracts\LazyRenderable</code>类型值，用法同上</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">footer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'字符串'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">footer</span><span class="token punctuation">(</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="尺寸" tabindex="-1"><a class="header-anchor" href="#尺寸"><span>尺寸</span></a></h3>
<p>默认 <code v-pre>500px</code></p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 800px</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">lg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 1140px</span></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">xl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="按钮-button" tabindex="-1"><a class="header-anchor" href="#按钮-button"><span>按钮 (button)</span></a></h3>
<p>设置按钮</p>
<h3 id="事件监听" tabindex="-1"><a class="header-anchor" href="#事件监听"><span>事件监听</span></a></h3>
<p>支持事件</p>
<ul>
<li><code v-pre>onShow</code> 弹窗显示事件</li>
<li><code v-pre>onShown</code> 弹窗已显示事件</li>
<li><code v-pre>onHide</code> 弹窗隐藏事件</li>
<li><code v-pre>onHidden</code> 弹窗已隐藏事件</li>
</ul>
<p>用法示例</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Admin</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">onShow</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'显示弹窗'</span><span class="token punctuation">,</span> target<span class="token punctuation">,</span> $<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    </span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">onHide</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">console<span class="token operator">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'隐藏弹窗'</span><span class="token punctuation">,</span> target<span class="token punctuation">,</span> $<span class="token punctuation">(</span>this<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    </span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="垂直居中-centered" tabindex="-1"><a class="header-anchor" href="#垂直居中-centered"><span>垂直居中 (centered)</span></a></h3>
<p>设置弹窗垂直居中</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$modal</span> <span class="token operator">=</span> <span class="token class-name static-context">Modal</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">xl</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">centered</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 设置弹窗垂直居中</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="内容可滚动-scrollable" tabindex="-1"><a class="header-anchor" href="#内容可滚动-scrollable"><span>内容可滚动 (scrollable)</span></a></h3>
<p>设置弹窗内容可滚动</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$modal</span> <span class="token operator">=</span> <span class="token class-name static-context">Modal</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">xl</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">scrollable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 设置弹窗内容可滚动</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">title</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">body</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="表单弹窗" tabindex="-1"><a class="header-anchor" href="#表单弹窗"><span>表单弹窗</span></a></h2>
<p>参考文档 <a href="https://learnku.com/docs/dcat-admin/1.x/tools-form/8125#modal" target="_blank" rel="noopener noreferrer">工具表单 - 弹窗</a></p>
</div></template>


